<template>
  <div>
    <wxc-popup popup-color="#fff"
               :show="show"
               @wxcPopupOverlayClicked="popupOverlayBottomClick"
               pos="top"
               height="590">
      <div class="sign-panel">
        <text class="sign-title">签到领羽毛</text>
        <text class="sign-tip">中断和连续签到{{userSignInfo.signCycleTimes}}天后需要重新累积哦</text>
        <div class="sign-day">
          <div class="sign-day-row" v-for="(list, lIdx) in signItemRows" v-bind:key="lIdx">
            <template v-for="(item, idx) in list">
              <div class="sign-day-cell" v-bind:key="idx" :style="{visibility: item.times ? 'visible': 'hidden'}">
                <div class="sign-day">
                  <text class="sign-day-tip">{{item.times==1 ? '首签' : '第' + item.times + '天'}}</text>
                  <text class="sign-day-num">+{{item.signIntegral}}</text>
                </div>
                <div class="sign-day-ok" v-if="item.times <= userSignInfo.currentContinuousSignTimes">
                  <text class="icon sign-day-ok-icon">&#xe645;</text>
                </div>
              </div>
            </template>
          </div>
        </div>
        <text class="btn btn-primary btn-md btn-sign" @click="sign()">{{!userSignInfo.signed ? '立即签到' : '今日已签到，明日签到可得'+userSignInfo.nextSignIntegral+'羽毛'}}</text>
        <text class="tip-info" @click="showDesc">坚持就有收获，羽毛如何才能转化为收益？&gt;&gt;</text>
      </div>
    </wxc-popup>
    <wxc-loading :show="loadingShow"></wxc-loading>
  </div>
</template>
<style lang="scss">
  @import "../sass/var";
  @import "../sass/mixin";
  @import "../sass/icon";
  @import "../sass/buttons";
  .sign-panel {
    padding: 50px 20px;
  }
  .sign-title {
    font-size: 40px;
    color: $color-warning;
    margin-top: 20px;
    text-align: center;
  }
  .sign-tip {
    text-align: center;
    font-size: 24px;
    color: $color-muted;
    margin-bottom: 30px;
  }
  .sign-info {
    text-align: center;
    font-size: 28px;
    position: relative;
    color: $color-muted;
    margin-top: 20px;
  }
  .btn-sign {
    margin-top: 20px;
  }
  .tip-info {
    font-size: 24px;
    text-align: center;
    color: $color-info;
    margin: 25px 0 0 0;
  }
  .sign-day {
    &-ok {
      position: absolute;
      top: 0;
      right: 0;
      left: 0;
      bottom: 0;
      background-color: rgba(251, 177, 14, 0.6);
      justify-content: center;
      align-items: center;
      border-radius: 6px;
      &-icon {
        color: #ffffff;
        font-size: 80px;
      }
    }
    &-row {
      flex-direction: row;
      justify-content: space-between;
      margin-bottom: 20px;
    }
    &-cell {
      background-color: #f4f4f4;
      width: 162px;
      height: 100px;
      align-items: center;
      justify-content: center;
      border-radius: 6px;
      position: relative;
    }
    &-tip {
      font-size: 22px;
      line-height: 22px;
      color: $color-muted;
    }
    &-fd {
      font-size: 20px;
      line-height: 20px;
    }
    &-num {
      font-size: 46px;
      color: $color-warning;
      font-weight: 300;
    }
  }
</style>
<script>

import { WxcPopup, WxcLoading } from 'weex-ui'
let api = require('../include/api')
let grouping = require('../include/grouping')
require('../include/page-xdom')
let navigator = require('../include/xnavigator')
module.exports = {
  components: {
    WxcPopup, WxcLoading
  },
  props: {
    show: {default: false}
  },
  data () {
    return {
      userSignInfo: {},
      signItemRows: [],
      loadingShow: false,
      doSign: false
    }
  },
  created () {
    this.$watch('show', () => {
      if (this.show) {
        this.loadData()
      }
    })
  },
  methods: {
    loadData (callback) {
      let self = this
      api.page.sign.data().done(rs => {
        let data = rs.data
        self.handleSignInfo(data)
        callback && callback()
      })
    },
    popupOverlayBottomClick () {
      this.show = false
      this.$emit('signHide')
    },
    handleSignInfo (data) {
      this.userSignInfo = data
      this.signItemRows = grouping(this.userSignInfo.signItemList, 4, {})
    },
    showDesc () {
      navigator.push('webpage.js?code=INTEGRAL_DESC&title=' + encodeURIComponent('羽毛的用途'))
    },
    sign () {
      if (this.doSign) {
        return
      }
      this.loadingShow = true
      this.doSign = true
      let self = this
      api.sign().done(rs => {
        let signInfo = rs.data
        self.handleSignInfo(signInfo)
      }).always(rs => {
        self.doSign = false
        this.loadingShow = false
      })
    }
  }
}
</script>
